<template>
	<view class="home-page flexc">
		<view class="tabbar">记事本</view>
		<view class="header">
			<view class="flexr flex-a-c flex-j-b">
				<view class="flexr flex-a-c" @click="typeBtn">
					<text>{{ data.acIndex == 0 ? '全部类型' : data.typeVal }}</text>
					<text class="iconfont icon-quanbu ml-10"></text>
				</view>
				<view class="flexr flex-a-c" @click="dateShow">
					<text>{{ data.dateTitle }}</text>
					<text class="iconfont icon-xiajiantou ml-10"></text>
				</view>
			</view>
			<view class="tip">总支出￥{{ data.tcp }} 总入账￥{{ data.jcp }}</view>
		</view>
		<view class="flex1 over-auto">
			<scroll-view scroll-y="true" style="height: 100%" @scrolltolower="sl">
				<view class="wrap">
					<view class="box" v-for="(item, index) in data.contentList" :key="item.date">
						<view class="date flexr flex-a-c flex-j-b">
							<view class="">
								<text>{{ item.date1 }}</text>
								<text class="ml-10">{{ item.dateTitle }}</text>
							</view>
							<view class="flexr flex-a-c">
								<view class="font-26">
									<text class="c">出</text>
									<text class="ml-10">{{ item.cprice }}</text>
								</view>
								<view class="ml-10 font-26">
									<text class="c">入</text>
									<text class="ml-10">{{ item.jprice }}</text>
								</view>
							</view>
						</view>
						<view class="flexr flex-a-c box-b" v-for="(val, k) in item.list" :key="val.id" @click="goDetail(val)">
							<view :class="['iconfont', 'icon-set', val.icon, val.isType == 1 ? 'ac1' : val.isType == 2 ? 'ac2' : 'ac3']"></view>
							<!-- <image src="../../static/logo.png" mode="aspectFit" class="img"></image> -->
							<view class="center flex1 ml-10">
								<view class="center-t flexr flex-a-c flex-j-b">
									<view class="">{{ val.title }}</view>
									<view class="">{{ val.isType == 1 ? '-' : val.isType == 2 ? '+' : '' }} {{ val.price }}</view>
								</view>
								<view class="remark over-hidden" v-if="val.remark">{{ val.remark }}</view>
							</view>
						</view>
					</view>
					<view class="nomore">{{ data.nomore ? '当前没有数据了奥~' : '上拉加载更多数据~' }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 当前筛选支付类型 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-wrap flexc">
				<view class="pop-nav">
					<view class="">请选择类型</view>
					<view class="close iconfont icon-guanbi1" @click="closeBtn(0)"></view>
				</view>
				<view class="flex1 over-auto pd">
					<view :class="['pop-tt', 'mb-20', data.acIndex == 0 ? 'active' : '']" @click="checkBtn(1, 0)">全部类型</view>
					<view class="">
						<view class="" v-for="(item, index) in data.list" :key="index">
							<view class="pop-title mb-20">{{ item.title }}</view>
							<view class="pop-f flexr flex-a-c flex-wr flex-j-b">
								<template v-for="(val, cid) in item.list" :key="cid">
									<view :class="['pop-tt', 'mb-20', val.checked ? 'active' : '']" @click="checkBtn(2, index, cid)">{{ val.title }}</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 时间的选择弹框 -->
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-wrap flexc">
				<view class="pop-nav">
					<view class="">请选择月份</view>
					<view class="close iconfont icon-guanbi1" @click="closeBtn(1)"></view>
				</view>
				<view class="flex1 over-auto pd npt">
					<view class="" v-for="(item, index) in data.dateList" :key="item">
						<view class="d-t">{{ item.key }}</view>
						<view class="flexr flex-a-c flex-j-b flex-wr">
							<view :class="['d-box', index == data.pindex && k == data.num ? 'active' : '']" v-for="(val, k) in item.val" :key="k" @click="dateBtn(index, k)">
								{{ val }}月
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 定位编辑 -->
		<view class="pof flexr flex-a-c flex-j-c" @click="showEdit" :style="{ right: data.r + 'px', top: data.t + 'px', transform: 'all .3s ease-in-out' }" @touchstart="start" @touchmove="move" @touchend="end">
			<image src="../../static/edit.png" mode="aspectFit" class="edit"></image>
			<view class="">记一笔</view>
		</view>
		<!-- 记一笔弹框 -->
		<popup-vue ref="popup2" @addSuccess="addSuccess"/>
	</view>
</template>

<script  setup>
	import popupVue from '../../components/popup.vue';
import { computed, nextTick, reactive, ref } from 'vue';
import { useStore } from '../../store';
import requestApi from '../../utils/api.js';
import { formatTime } from '../../utils/util.js';
import { onShow ,} from '@dcloudio/uni-app'
let popup = ref(null);
let popup1 = ref(null);
let popup2 = ref(null);
const store = useStore();
const data = reactive({
	acIndex: 0, //类型样式，全部的
	typeVal: '', //选择类型的val值
	dateTitle: '', //选择日期的val值
	date: 2022, //当前筛选出用户记录的最小的年份进行日期的展示
	dateList: [], //当前最小日期到当前月份的数据
	pindex: 0, //日期样式选中
	num: 0, //日期样式选中
	//当前类型的数据，名称及图标
	list: computed(() => store.typeList),
	page: 1,
	contentList: [],
	nomore: false,
	tcp: 0,
	jcp: 0,
	r:20,
	t: uni.getSystemInfoSync().windowHeight - 100,
	x:0,
	y:0,
	isTop:false,
	windowWidth:uni.getSystemInfoSync().windowWidth,
	windowHeight:uni.getSystemInfoSync().windowHeight
});
let pIndex = 0,
	cIndex = 0;
	store.getTypeList()
	// 点击跳转到当前账单的详情页面
	const goDetail = (val)=>{
		uni.setStorageSync('detail',JSON.stringify(val))
		uni.navigateTo({
			url:'/pages/detail/detail'
		})
	}
	onShow(()=>{
		// 从详情跳转回来进行刷新列表数据
		if(uni.getStorageSync('refrsh')){
			init()
			uni.removeStorageSync('refrsh')
		}
	})
	const start = (e) => {
		data.isTop = true;
		data.x = e.touches[0].pageX;
		data.y = e.touches[0].pageY;
		console.log(e.touches[0].pageY,'e.touches[0].pageY');
	};
	const move = (e) => {
		if (!data.isTop) return;
		const newT =e.touches[0].pageY - data.y + data.t
		const newR = data.x - e.touches[0].pageX + data.r;
		if (newR < 0) {
			data.r = 0;
		} else if (newR > data.windowWidth - 50) {
			data.r = data.windowWidth - 100;
		} else {
			data.r = newR ;
		}
		if (newT < 0) {
			data.t = 0;
		} else if (data.t > data.windowHeight - 40) {
			data.t = data.windowHeight - 100;
		} else {
			console.log(newT,'newT',e.touches[0].pageY,data.y);
			data.t = newT;
		}
		data.y = e.touches[0].pageY;
		data.x = e.touches[0].pageX;
	};
	const end = () => {
		data.isTop = false;
		// 当移动到中间的时候，进行判断，只能在左右
		if (data.r > data.windowWidth / 2 - 20) {
			data.r = data.windowWidth - 100;
		} else {
			data.r = 20;
		}
	};
	// 记一笔添加成功的回调
const addSuccess = ()=>init()
// 初始化获取数据列表接口
const init = (flg = false) => {
	const page = flg ? data.page : 1;
	let checkType = '';

	if (data.acIndex != 0) {
		checkType = data.list[pIndex].list[cIndex].type;
	}
	// 每次请求总支出和收入归0，重新计算
	data.tcp = 0;
	data.jcp = 0;
	const m = data.dateList[data.pindex].val[data.num] < 10 ? '0' + data.dateList[data.pindex].val[data.num] : data.dateList[data.pindex].val[data.num];
	const params = {
		id: store.j_token,
		page,
		size: 10,
		type: 'get',
		date: `${data.dateList[data.pindex].key}-${m}`,
		checkType
	};
	console.log(params, 'params------');
	requestApi('jSign', params).then((res) => {
		if (res.result.status === 'S') {
			let arr = [];
			res.result.data.forEach((item) => {
				item.date1 = formatTime(new Date(item.date), 'm-d');

				let foundObj = arr.find((obj) => obj.date === item.date);
				if (foundObj) {
					foundObj.list.push(item);
				} else {
					let obj = {
						date: item.date,

						date1: item.date1,
						dateTitle: formatTime(new Date(item.date), 'week'),
						list: [item]
					};
					arr.push(obj);
				}
			});

			if (flg) {
				data.contentList = data.contentList.concat(arr);
			} else {
				data.contentList = arr;
			}
			data.contentList.forEach((item) => {
				item.cprice = 0;
				item.jprice = 0;

				item.list.forEach((val) => {
					// 当天的支出
					if (val.isType == 1) {
						item.cprice = Number(item.cprice) + Number(val.price);
					} else if (val.isType == 2) {
						//当天的收入
						item.jprice = Number(item.jprice) + Number(val.price);
					}
				});
				// 当月的支出和收入
				data.tcp = Number(data.tcp) + Number(item.cprice);
				data.jcp = Number(data.jcp) + Number(item.jprice);
			});
			data.nomore = Math.ceil(res.result.total / 10) <= page;
			console.log('data.contentList', data.nomore);
		}else{
			data.nomore = true
			data.contentList=data.contentList.length>0?data.contentList:[]
		}
	});
};
// 上拉加载
const sl = () => {
	console.log('上拉');
	if (data.nomore) return;
	data.page++;
	init(true);
};


//点击记一笔展示弹框
const showEdit = () => {
	console.log(popup2.value,'popup2.value');
	popup2.value.open();
	
};
// 弹框左边的关闭按钮事件
const closeBtn = (k) => {
	if (k == 0) {
		popup.value.close();
	} else if (k == 1) {
		popup1.value.close();
	} else if (k == 2) {
		popup2.value.close();
	}
};
// 日期选择的逻辑
const dateBtn = (p, k) => {
	data.pindex = p;
	data.num = k;
	data.dateTitle = `${data.dateList[p].key}年${data.dateList[p].val[k]}月`;
	init();
	popup1.value.close();
};
//日期初始化处理
const getDate = () => {
	data.dateList = [];
	const date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	const y = year - data.date;
	const l = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
	if (y > 0) {
		for (var i = 0; i < y; i++) {
			let obj = {
				key: data.date + i,
				val: l
			};
			data.dateList.push(obj);
		}
	}
	data.dateList.push({
		key: year,
		val: l.slice(0, month)
	});

	data.pindex = data.dateList.length - 1;
	data.num = data.dateList[data.dateList.length - 1].val.length - 1;
	data.dateTitle = `${data.dateList[data.pindex].key}年${data.dateList[data.pindex].val[data.num]}月`;
};
// 时间弹框
const dateShow = () => {
	popup1.value.open();
};
// 初始化处理日期数据
getDate();
init();
// 选择类型中的点击事件
const checkBtn = (t, k, i) => {
	data.list.forEach((item) => item.list.forEach((val) => (val.checked = false)));
	if (t === 1) {
		data.acIndex = k;
		data.typeVal = '';
	} else {
		data.acIndex = t;
		pIndex = k;
		cIndex = i;
		data.list[k].list[i].checked = true;
		data.typeVal = data.list[k].list[i].title;
	}
	init();
	popup.value.close();
	// 请求当前筛选后的接口数据
};
// 点击顶部分类弹框展示
const typeBtn = () => {
	popup.value.open();
	if (data.acIndex == 0) {
		data.list.forEach((item) => item.list.forEach((val) => (val.checked = false)));
	}
};
</script>

<style lang="scss">
.home-page {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	.tabbar {
		height: var(--window-bottom);
		text-align: center;
		line-height: var(--window-bottom);
		width: 100%;
		background-color: rgba(255, 170, 127, 0.8);
		font-weight: bold;
	}
	.header {
		padding: 20upx 40upx;
		background-color: rgba(255, 170, 127, 0.8);
	}
	.tip {
		margin-top: 20upx;
		text-align: right;
		font-weight: bold;
		color: #fff;
		font-size: 26upx;
	}
	.wrap {
		padding: 20upx;
		.nomore {
			text-align: center;
			margin: 20upx 0;
			font-size: 28upx;
			color: #ccc;
		}
		.box {
			background-color: #fff;
			border-radius: 20upx;
			padding: 40upx 20upx 20upx;
			margin-bottom: 20upx;

			.img {
				width: 80upx;
				height: 80upx;
				margin-right: 40upx;
			}
			.date {
				margin-bottom: 40upx;
			}
			.font-26 {
				font-size: 26upx;
			}
			.c {
				color: orangered;
			}
			.center {
				padding-bottom: 20upx;
				border-bottom: 2upx solid #f5f5f5;
				&-t {
					font-weight: bold;
				}
				.remark {
					width: 400upx;
					font-size: 26upx;
					margin-top: 10upx;
					color: #ccc;
				}
			}
			.center:last-child {
				border-bottom: none;
			}
			.box-b {
				padding-bottom: 20upx;
				border-bottom: 1upx solid #ccc;
				margin-bottom: 20upx;
			}
			.box-b:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
	}
	.pop-wrap {
		height: 800upx;
		background-color: #fafafa;
		border-radius: 20upx 20upx 0 0;
		box-sizing: border-box;
		padding-bottom: var(--window-bottom);
		.pop-nav {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			border-bottom: 1upx solid #ccc;
			position: relative;
			padding: 0 40upx;
			.close {
				position: absolute;
				top: 50%;
				left: 40upx;
				font-size: 40upx;
				transform: translateY(-50%);
			}
		}
		.pd {
			font-size: 30upx;
			background: #fafafa;
			padding: 60upx 40upx 0;
			.pop-tt,
			.d-box {
				width: 30%;
				text-align: center;
				box-sizing: border-box;
				padding: 20upx 40upx;
				border-radius: 20upx;
				background: #fff;
			}

			.pop-f::after {
				content: '';
				width: 30%;
			}
			.pop-title {
				font-size: 26upx;
			}
			.mb-20 {
				margin-bottom: 20upx;
			}
			.active {
				background-color: #ffaa7f;
				color: #fff;
			}
		}
		.d-t {
			margin: 40upx 0;
			text-align: center;
		}
		.d-box {
			margin-bottom: 20upx;
		}
		.npt {
			padding: 0 40upx 0;
		}
	}
	.h80 {
		height: 1000upx;
	}
	.pof {
		position: fixed;
		right: 20upx;
		bottom: 200upx;
		width: 160upx;
		height: 60upx;
		font-size: 26upx;
		border-radius: 40upx;
		background-color: #fff;
		box-shadow: 0 0 20upx #ccc;
		color: #ffaa7f;
		.edit {
			width: 40upx;
			height: 40upx;
			margin-right: 10upx;
		}
	}
	.pt {
		display: inline-block;
		padding: 10upx 20upx;
		background-color: #eee;
		margin-right: 20upx;
		border-radius: 10upx;
		font-size: 26upx;
		color: #ccc;
	}
	.p1 {
		color: #3eb575;
		background-color: #ebf7f1;
	}
	.p2 {
		background-color: #fdf8eb;
		color: #f0b73a;
	}
	.p3 {
		background-color: #f1f3f6;
		color: #7888aa;
	}

	.type-pd {
		padding: 20upx 40upx;
	}
	.price-t {
		font-size: 40upx;
		font-weight: bold;
		padding: 40upx 40upx;
		border-bottom: 1upx solid #eee;
		& > input {
			width: 100%;
			height: 40upx;
			margin-left: 30upx;
		}
	}
	.p-c {
		height: 400upx;
		padding: 0 40upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	.p-box {
		width: 20%;
		text-align: center;
		font-size: 24upx;
		margin-bottom: 20upx;
		color: #ccc;
	}
	.icon-set {
		font-size: 30upx;
		color: #ccc;
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		background-color: #efefef;
		line-height: 60upx;
		text-align: center;
		margin: 0 auto 10upx;
	}
	.p-r {
		font-size: 28upx;
		.p-i {
			margin-left: 20upx;
			width: 80%;
		}
	}
	.icon-jt {
		font-size: 20upx;
	}
	.b {
		color: #576b95;
	}
	.confirm {
		width: 80%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		font-weight: bold;
		border-radius: 20upx;
		margin: 20upx auto 0;
	}
	.ac {
		color: #000;
	}
	.ac1 {
		color: #fff;
		background-color: #3eb575;
	}
	.ac2 {
		color: #fff;
		background-color: #f0b73a;
	}
	.ac3 {
		color: #fff;
		background-color: #7888aa;
	}
	.d {
		background-color: #ccc;
		color: #fff;
	}
}
</style>
